<!doctype html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0-2/css/bootstrap.min.css}"/>
    <script defer th:src="@{/webjars/font-awesome/5.0.6/svg-with-js/js/fontawesome-all.min.js}"></script>
    <link rel="stylesheet" th:href="@{/styles.css}"/>
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">SivaLabs : GeeksClub</title>
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="#" th:href="@{/}">GeeksClub</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse"
                data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
            </ul>
            <ul class="navbar-nav" sec:authorize="!isAuthenticated()">
                <li class="nav-item" >
                    <a class="nav-link" href="#" th:href="@{/login}">Login</a>
                </li>
                <li class="nav-item" >
                    <a class="nav-link" href="#" th:href="@{/registration}">Registration</a>
                </li>
            </ul>

            <ul class="navbar-nav" sec:authorize="isAuthenticated()">

                <li class="nav-item">
                    <a class="nav-link" href="#addlink" th:href="@{/newlink}">Submit Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span sec:authentication="principal.user.name">User</span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#" th:href="@{/users/{id}(id=${#authentication.getPrincipal().getUser().getId()})}">My Account</a>
                        <a class="dropdown-item" href="#">Change Password</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" th:href="@{/logout}">Logout</a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main id="app" role="main" class="container">
    <div layout:fragment="content">
        <!-- Your Page Content Here -->
    </div>

</main><!-- /.container -->

<script th:src="@{/webjars/jquery/3.0.0/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/1.12.9-1/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.0.0-2/js/bootstrap.min.js}"></script>
</body>
</html>